<template>
	<button
		@click="emitclick"
		:class="{
			but: true,
			type1: props.type === 'type1',
			type2: props.type === 'type2',
			type3: props.type === 'type3',
			type4: props.type === 'type4',
			type5: props.type === 'type5',
			type6: props.type === 'type6',
			type7: props.type === 'type7',
		}"
	>
		{{ props.title }}
	</button>
</template>
<script setup lang="ts">
const props = defineProps({
	type: String,
	title: String,
})
const emit = defineEmits(['click'])

function emitclick() {
	emit('click')
}
//
</script>
<style scoped lang="less">
.but {
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 3px;
  line-height: 16px;
}
.type1 {
	border: 1px solid #fa8c16;
	color: #fa8c16;
  background-color: #fff;
}
.type2 {
	border: 0;
	color: #E86060;
  background-color: #FFEAEA;
}
.type3 {
	border: 0;
	color: #FFFFFF;
  background-color: #F44552;
}
.type4 {
	border: 0;
	color: #FFFFFF;
  background-color: #1AB88F;
}
.type5 {
	border: 0;
	color: #FFFFFF;
  background-color: #8E8B8B;
}
.type6 {
  border: 0;
	color: #5483EE;
  background-color: #DFE8FE;
}
.type7 {
	border: 0;
	color: #FF550C;
  background: rgba(255,85,12,0.15);
}
</style>
